<h2 mat-dialog-title>{{ title }}</h2>

<div>
    <mat-dialog-content class="mat-typography">
        <button mat-dialog-close class="close-button">
            <mat-icon>close</mat-icon>
        </button>
        <mat-tab-group #tabgroup [animationDuration]="'0ms'" class="tab-group">
            <mat-tab label="Message Generator" *ngIf="featureFlags.openAIEnabled">
                <div class="message-label">Message Rules:</div>
                <br />
                <textarea type="text" [(ngModel)]="prompt" title="Message" [placeholder]="placeholder"></textarea>
                <!-- 添加语言选择的下拉菜单 -->
                <div class="language-selection">
                    <label for="language">Select Language:</label>
                    <select [(ngModel)]="selectedLanguage"  (change)="onLanguageChange()" id="language" class="rounded-select">
                        <option value="en">English</option>
                        <option value="zh">Chinese</option>
                        <option value="es">Spanish</option>
                        <!-- 你可以根据需要添加更多语言 -->
                    </select>
                </div>
                <div mat-dialog-actions align="end">
                    <button mat-stroked-button cdkFocusInitial (click)="generateEmailSmsMessages()">
                        Generate Email/SMS Messages
                    </button>
                </div>
                <div *ngIf="error" class="error-message">{{ error }}</div>
            </mat-tab>
            <mat-tab label="Email/SMS">
                <div class="grid-container">
                    <div>
                        <div class="message-label">Email Message:</div>
                        <br />
                        <input type="text" [(ngModel)]="emailSubject" title="Subject" class="email-subject" placeholder="Subject" />
                        <textarea type="text" [(ngModel)]="emailBody" title="Message" class="email-message"></textarea>
                        <div *ngIf="emailSent" class="message-sent">Email sent!</div>
                        <div mat-dialog-actions align="end">
                            <button mat-stroked-button cdkFocusInitial (click)="sendEmail()" [disabled]="!emailSubject || !emailBody">Send Email</button>
                        </div>
                    </div>

                    <div>
                        <div class="message-label">SMS Message:</div>
                        <textarea type="text" [(ngModel)]="smsMessage" title="Message" class="sms-message"></textarea>
                        <div *ngIf="smsSent" class="message-sent">SMS message sent!</div>
                        <div mat-dialog-actions align="end">
                            <button mat-stroked-button cdkFocusInitial (click)="sendSms()" [disabled]="!smsMessage">Send SMS</button>
                        </div>
                    </div>
                </div>
            </mat-tab>
        </mat-tab-group>
    </mat-dialog-content>
</div>
